<template>
	<view class="skill-cards" :style="{bottom:bottom+'rpx'}">
		<view class="scroll-content">
			<view class="card-item" :class="{cdEndItem:item.cdTime==item.nowCdTime}" v-for="(item,index) in cardList"
				:key="index" @click.stop="handleCardClick(index,item)" @touchend.stop>
				<view class="item-content">
					<image class="item-img" :src="item.image" mode=""></image>
					<view class="bottom-name">{{item.name}}</view>
					<view class="cd-progress">
						<view class="cd-content" :style="{width:(item.nowCdTime/item.cdTime)*100+'%'}"></view>
					</view>

				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			bottom: {
				type: Number,
				default: 20
			},
			isEnd: {
				type: Boolean,
				default: false
			}
		},
		watch: {
			isEnd: {
				handler(newVal, oldVal) {
					if (newVal) {
						clearInterval(this.cdIntervalId)
					}
				},
				deep: true,
				immediate: true
			}
		},
		data() {
			return {
				cdIntervalId: null,
				aciveIndex: -1,
				cardList: [{
						image: 'https://cdn.osisx.com/wenzhu/images/gifts/feiwen.png',
						name: '无敌飞吻',
						price: '19',
						selected: false,
						id: 99,
						svgaSrc: 'https://cdn.osisx.com/wenzhu/images/gifts/feiwen.svga',
						cdTime: 3,
						nowCdTime: 0
					},
					{
						image: 'https://cdn.osisx.com/wenzhu/images/gifts/xingzhoufanxin.png',
						name: '星舟泛心',
						price: '19',
						selected: false,
						id: 61,
						svgaSrc: 'https://cdn.osisx.com/wenzhu/images/gifts/xingzhoufanxin.svga',
						cdTime: 3,
						nowCdTime: 0
					},
					{
						image: 'https://cdn.osisx.com/wenzhu/images/gifts/rose.png',
						name: '浪漫满屋',
						price: '99',
						selected: false,
						id: 8,
						svgaSrc: 'https://cdn.osisx.com/wenzhu/images/gifts/rose.svga',
						cdTime: 4,
						nowCdTime: 0
					},
					{
						image: 'https://cdn.osisx.com/wenzhu/images/gifts/haohuapaoche.png',
						name: '豪华跑车',
						price: '199',
						selected: false,
						id: 10,
						svgaSrc: 'https://cdn.osisx.com/wenzhu/images/gifts/posche.svga',
						cdTime: 8,
						nowCdTime: 0
					},
					{
						image: 'https://cdn.osisx.com/wenzhu/images/gifts/haohuayouting.png',
						name: '豪华游艇',
						price: '219',
						selected: false,
						id: 11,
						svgaSrc: 'https://cdn.osisx.com/wenzhu/images/gifts/youlun.svga',
						cdTime: 9,
						nowCdTime: 0
					},
					{
						image: 'https://cdn.osisx.com/wenzhu/images/gifts/feiji.png',
						name: '一飞冲天',
						price: '228',
						selected: false,
						id: 5,
						svgaSrc: 'https://cdn.osisx.com/wenzhu/images/gifts/feiji.svga',
						cdTime: 10,
						nowCdTime: 0

					},

				]
			}


		},
		beforeDestroy() {
			clearInterval(this.cdIntervalId)
		},
		mounted() {
			// this.handleStartAllCd()
		},
		methods: {
			handleStartAllCd() {
				this.cdIntervalId = setInterval(() => {
					this.cardList.forEach((item, index) => {
						if (item.nowCdTime !== item.cdTime) {
							item.nowCdTime += 0.5
						}
					})

				}, 500)
			},
			handleCardClick(index, item) {
				this.aciveIndex = index
				if ((item.cdTime == item.nowCdTime) && !this.isEnd) {
					item.nowCdTime = 0
					this.cardList[index] = item
					this.$emit("playCardGift", item)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.skill-cards {
		position: absolute;
		left: 0rpx;
		width: 100vw;
		height: 180rpx;
		z-index: 9999999999;
		display: flex;
		align-items: center;
		justify-content: center;

		.scroll-content {
			width: 100vw;
			height: 160rpx;

			display: flex;
			align-items: center;
			justify-content: center;

			.card-item {
				position: relative;
				display: inline-block;
				width: 110rpx;
				height: 100%;
				margin-right: 15rpx;
				box-sizing: border-box;
				border-top-left-radius: 10rpx;
				border-bottom-right-radius: 10rpx;


				.item-content {
					position: absolute;
					left: 0rpx;
					top: 0rpx;
					width: 100%;
					height: 100%;

					border-top-left-radius: 10rpx;
					border-bottom-right-radius: 10rpx;
					overflow: hidden;
					background-color: rgba(0, 0, 0, .3);
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;
					box-shadow: 0rpx 0rpx 4rpx #fff;
					border: 2rpx solid transparent;
					overflow: hidden;

					.item-img {
						width: 110rpx;
						height: 110rpx;
						object-fit: cover;
						// background-color: #fff;
					}

					.bottom-name {
						width: 100%;
						height: 30rpx;
						font-size: 20rpx;
						font-weight: 400;
						line-height: 30rpx;
						color: #fff;
						text-align: center;
						background-color: rgba(0, 0, 0, .6);
					}

					.cd-progress {
						position: absolute;
						left: 50%;
						transform: translateX(-50%);
						bottom: 32rpx;
						width: 90%;
						height: 10rpx;
						border-radius: 10rpx;
						background-color: #ccc;
						overflow: hidden;

						.cd-content {
							width: 80%;
							height: 100%;
							background-color: #4d90fe;
							transition: all 0.5s linear;
						}
					}

				}


				&:first-child {
					margin-left: 10rpx;
				}
			}

			.activeItem {

				animation: bigAni 0.5s;
				border-color: #fff;

				.item-content {
					border-color: #fff;
				}

			}

			.cdEndItem {
				.item-content {
					top: -20rpx;
					border-color: #fff;
				}
			}

			@keyframes bigAni {
				0% {
					transform: scale(1);
				}

				100% {
					transform: translate(1.1);
				}
			}


		}
	}
</style>